
/*------------------------------------------------- */
/* =  article post
 *------------------------------------------------- */

.article-post {
	.image-holder {
		margin-bottom: 15px;
		overflow: hidden;
		&:hover {
	 		img {
				animation-name: imagemove;
				animation-duration: 3s; 
				animation-timing-function: ease-out; 
				animation-delay: 0s;
				animation-direction: alternate;
				animation-iteration-count: infinite;
				animation-fill-mode: none;
				animation-play-state: running; 
			}
			@keyframes imagemove {
				0% {
					@include rotate-scale(0deg, 1);
				}
				100% {
					@include rotate-scale(5deg, 1.1);
				}
			}
	 	}
	}
	img {
		width: 100%;
		height: auto;
	}
	h2 {
		margin-bottom: 4px;
		a {
			color: $title-color;
			&:hover {
				color: $primary-color;
			}
		}
	}
	p {
		margin-top: 15px;
		margin-bottom: 0;
	}
}

.article-post2 {
	.image-holder {
		overflow: hidden;
		&:hover {
	 		img {
				animation-name: imagemove;
				animation-duration: 3s; 
				animation-timing-function: ease-out; 
				animation-delay: 0s;
				animation-direction: alternate;
				animation-iteration-count: infinite;
				animation-fill-mode: none;
				animation-play-state: running; 
			}
			@keyframes imagemove {
				0% {
					@include rotate-scale(0deg, 1);
				}
				100% {
					@include rotate-scale(5deg, 1.1);
				}
			}
	 	}
	}
	img {
		width: 100%;
		height: auto;
	}
	a.text-link {
		margin-top: 15px;
		margin-bottom: 10px;
	}
	h2 {
		margin-bottom: 4px;
		a {
			color: $title-color;
			&:hover {
				color: $primary-color;
			}
		}
	}
	p {
		margin-top: 15px;
		margin-bottom: 0;
	}
}